<template>
	<div>
		<img :src="imageUrl" alt="" mode="widthFix" style="width: 100%" />
		<l-painter ref="painter" @done="onsave" custom-style="position: fixed; left: 200%">
			<l-painter-view css="
          width: 100%; background-color: white;
          display: flex; flex-direction: column;
          align-items: center; position: relative; padding-bottom: 10px;
        ">
				<l-painter-image :src="img ? baseImageUrl + img : '@/static/images/WechatIMG1449.jpg'"
					css="width: 100%; height: 186px;" />
				<l-painter-text :text="name || ''"
					css="padding: 20px; font-size: 18px; font-weight: bold; width: 300px; text-align: center;" />
				<l-painter-text :text="time || '--'" css="font-size: 14px; margin-bottom: 12px;" />
				<l-painter-qrcode :text="qcCodeUrl" css="width: 300rpx; height: 300rpx" />
				<l-painter-text text="扫码关注比赛" css="font-size: 24px; font-weight: bold; margin-top: 10px;" />
				<l-painter-image src="@/static/images/WechatIMG1449.jpg"
					css="width: 200px; height: 100px; margin-top: 12px" />
				<l-painter-text text="还原每个真实篮球比赛" css="
              position: absolute; bottom: 10px; right: 70px;
              font-size: 14px; font-weight: bold;
            " />
			</l-painter-view>
		</l-painter>
	</div>
</template>

<script>
	import config from "@/config";
	import {
		getLeagueH5ContestList
	} from "@/api/tournament/index.js";
	export default {
		data() {
			return {
				list: [],
				pageDate: {
					pageSize: 10,
					pageNum: 1,
				},
				total: 0,
				loadingType: "",
				baseImageUrl: "",
				imageUrl: "",
				id: "",
				name: "",
				img: "",
				time: "",
				qcCodeUrl: "",
			};
		},
		onReady() {},
		onLoad({
			id,
			name,
			img,
			time
		}) {
			// this.baseImageUrl = config.imageUrl;
			this.baseImageUrl = config.baseUrl + '/system/oss/preview/';
			this.id = id;
			this.name = name;
			this.img = img;
			this.time = time;
			this.qcCodeUrl = `${location.origin}#/pages/index?id=${this.id}&name=${this.name}&img=${this.img}`;
			this.getList();
			uni.setNavigationBarTitle({
				title: name
			})
		},
		async onReachBottom() {
			if (this.list.length == this.total) {
				this.loadingType = "no-more";
				return;
			}
			this.loadingType = "loading";
			this.pageDate.pageNum += 1;
			this.getList();
		},
		methods: {
			onsave() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "png",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: "base64",
					quality: 1,
					success: (res) => {
						this.imageUrl = res.tempFilePath;
					},
				});
			},
			//获取数据
			getList() {
				getLeagueH5ContestList(this.pageDate).then((res) => {
					this.total = res.total;
					this.list.push(...res.rows);
					if (this.list.length == this.total) {
						this.loadingType = "no-more";
						return;
					}
				});
			},
			//联赛详情
			goDetail(id, item) {
				uni.setStorageSync("scoringWay", item.scoringWay);
				uni.navigateTo({
					url: "/pages/index?id=" +
						id +
						"&name=" +
						item.contestName +
						"&img=" +
						(item.contestLogo ? item.contestLogo : ""),
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.date {
		margin-bottom: 12px;
	}

	.code {
		width: 300px;
		height: 300px;
		background: pink;
	}

	.focus-text {
		font-size: 24px;
		font-weight: bold;
	}

	.bottom-text {
		position: absolute;
		bottom: 0px;
		right: 70px;
		font-size: 14px;
		font-weight: bold;
	}

	.page {
		width: 100%;
		background-color: white;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.banner {
		width: 100%;
		height: 372rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		width: 100%;
		margin: auto;
		padding: 40rpx;
		text-align: center;
		background-color: #fff;
		font-size: 32rpx;
		font-weight: 700;
	}
</style>